

// function hoverMove() { //下拉菜单设置
//     var hover_b = document.getElementsByClassName('hoverMove');
//     for (var i = 0; i < hover_b.length ; i++) {
//         hover_b[i].onmouseover = function () {
//             this.children[1].style.display = 'block';
//             var this_style = this.children[1].style;
//             var time = this.children[1].time;
//             // clearInterval(time);
//             var top = parseInt(this_style.top);
//             time = setInterval(function () {
//             top +=1;
//             this_style.top = top + 'px';
//             console.log(top,time);
//             if (top>0){clearInterval(time);}
//             },10);    
//         }
//         hover_b[i].onmouseout = function () {
//             this.children[1].style.display='none';

//             // clearInterval(this.children[1].time);
//             var top = -30;
//             this.children[1].style.top=top+"px";
//             console.log(top);
//         }
//     }
// }


window.onload = function() {    
    // hoverMove();
}

// 幻灯片
$(function(){
    var widths = Math.ceil($('#slide_effect').width());//图片宽度
    var heights = Math.ceil($('#slide_effect').height());//图片高度
    var lengths = $('#slide_effect ul li').length; //图片个数
    var index = 0 , times = 0 , n = 0;
    $("#slide_effect ul").css("width",widths*lengths);    //左右时使用
    // $("#slide_effect_content").css("width",widths*lengths);  //上下时使用
    // $("#slide_effect .slide_effect_ul").css("height",heights*lengths);//上下时使用
    //下方背条及左右按钮
    var buttons = "<div class='background_bar'></div>";//背景条
    buttons +="<div class='move_button'>";//下方按钮
    for(var i=0; i < lengths; i++) {
        buttons += "<span></span>";
        }    buttons += "</div>";
    buttons += "<div class='press_button press_button_left'></div><div class='press_button press_button_right'></div>";//左右按钮
    $("#slide_effect").append(buttons);
    //下按钮 over
    $("#slide_effect .move_button span").mouseover(function() {
            index = $("#slide_effect .move_button span").index(this);
            showpictures(index);
        }).eq(0).trigger("mouseover");//默认效果
    //左按钮
    $("#slide_effect .press_button_left").click(function() {
        index -= 1;
        if(index == -1) {index = lengths - 1;}
        showpictures(index);
        });
    //右按钮
    $("#slide_effect .press_button_right").click(function() {
        index += 1;
        if(index == lengths) {index = 0;}
        showpictures(index);
        });
    //左右按钮明暗处理
    $("#slide_effect .press_button").css("opacity",0.2).hover(function() {
        $(this).stop(true,false).animate({"opacity":"0.5"},300);
    },function() {
        $(this).stop(true,false).animate({"opacity":"0.2"},300);
        });
    //下按钮
    $("#slide_effect").hover(function() {
        clearInterval(times);
        $('#slide_effect .press_button_left').css({'display':'block',}).next().css({'display':'block',})//只有在hover是显示左右按钮
    },function() {
        $('#slide_effect .press_button_left').css({'display':'none',}).next().css({'display':'none',})
        times = setInterval(function() {
            if(n==0){index++;n++;if(index==7){index--;}}
            showpictures(index);
            index++;
            if(index == lengths) {index = 0;}
        },1000);
        }).trigger("mouseleave");
    //切换
    function showpictures(index) {
        //根据index值计算ul的移动值
        var nowlefts = -index*widths; 
        var nowtops  = -index*heights;
        //通过animate()调整ul元素滚动到计算出的position
        $("#slide_effect #slide_effect_content").stop(true,false).animate({"left":nowlefts},300);//左右
        $("#slide_effect .slide_effect_ul").stop(true,false).animate({"left":nowlefts},300);//上下
        $("#slide_effect .move_button span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); //矩形选中效果
        // $("#slide_effect .move_button span").stop(true,false).removeClass('move_button_color').eq(index).stop(true,false).addClass('move_button_color');//圆形
        }//为当前的按钮切换到选中的效果
});
// 幻灯片